<template>
<view class="report-box" @touchmove.stop.prevent="moveHandle">
		<view class="report-disalog">
			<view class="disalog-title">
				{{title}}
			</view>
			<view class="disalog-content">
				<view class="from-input">
					<view class="title">
						
					</view>
					<view class="from-item" v-if="type == 'score'">
						<view class="title">
							打分：
						</view>
						<input class="from-input" placeholder="请打分" type="number" value=""  @input="scoreChange"/>
					</view>
				</view>
				<textarea class="remark-input" @input="inputChange" :value="text" placeholder-style="color:#9e9e9e" placeholder="输入备注信息" />
				<view class="button-box" @click="cancel">
					<view class="button cancel-button">
						取消
					</view>
					<view @click="confirm" class="button confirm-button">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			title:{
				type:String,
				default:'输入备注信息'
			},
			text:{ // 输入值
				type:String,
				default:''
			},
			type:{ // 状态
				type:String,
				default:''
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			/**
			 * 打分输入文本触发事件
			 */
			scoreChange:function(e){
				this.$emit('scoreChange',e.target.value);
			},
			/**
			 * 输入框输入文本触发事件
			 */
			inputChange:function(e){
				console.log(e.target.value);
				this.$emit('inputChange',e.target.value);
			},
			/**
			 * 取消按钮点击触发事件
			 */
			cancel:function(){
				this.$emit('cancel');
			},
			/**
			 * 提交按钮点击触发事件
			 */
			confirm:function(){
				this.$emit('confirm',this.type);
			},
			moveHandle(){
				return;
			},
		}
	}
</script>

<style lang="scss" scoped>
.report-box {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		background: rgba(20, 20, 20, 0.5);
	}

	.report-disalog {
		background-color: white;
		border-radius: 10rpx;
		margin: 0 auto;
		position: relative;
		top: 20%;
		animation-name: disalogshow;
		animation-duration: 0.5s;
		width: calc(100% - 180rpx);
		box-sizing: border-box;
		padding: 20rpx;

		.disalog-title {
			text-align: center;
		}

		.disalog-content {
			margin-top: 30rpx;

			.remark-input {
				background-color: #f4f4f4;
				width: 100%;
				box-sizing: border-box;
				height: 200rpx;
				padding: 20rpx;
				font-size: 28rpx;
			}
			.from-item{
				display: flex;
				margin-bottom: 20rpx;
				.title{
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.from-input{
					height: 50rpx;
					flex: 1;
					background-color: #f4f4f4;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
			
		}

		.button-box {
			display: flex;
			margin-top: 30rpx;
			justify-content: space-around;

			.button {
				width: calc(50% - 20rpx);
				line-height: 70rpx;
				text-align: center;
				color: white;
				border-radius: 10rpx;
			}

			.cancel-button {
				background-color: #888888;
			}

			.confirm-button {
				background-color: #36af86;
			}
		}
	}

	@keyframes disalogshow {
		0% {
			// transform: scale(0);
			opacity: 0;
		}

		100% {
			// transform: scale(1);
			opacity: 1;
		}
	}
</style>
